<!-- 验证码,密码,短信登录 -->
<!-- 扫码登录 -->
<template>
  <div class="sign-content">
    <div class="inner-box">
      <form action="" method="post">
        <div class="sign-tab">
          <p class="scan-title-text">验证码登录</p>
        </div>
        <div class="sign-call">
          <i class="el-icon-mobile-phone"></i>
          <p>+86</p>
          <i class="el-icon-arrow-down"></i>
          <input type="tel" class="ipt" placeholder="手机号" />
        </div>
        <div class="form-row">
          <p>点击按钮进行验证</p>
        </div>
        <div class="form-rows">
          <span class="el-icon-message"></span>
          <input placeholder="短信验证码" />
          <span>|</span>
          <button>发送验证码</button>
        </div>
        <div class="from-btn">
          <button type="submit" class="btn">登录/注册</button>
        </div>
        <div class="text-tip">
          <a> <span class="iconfont icon-weixin"></span> 微信登录</a>
          <a class="pwd-login-btn" @click="showSCanHandle">二维码登录</a>
          <a class="link-dignup">免费注册</a>
        </div>

        <div class="text-argeement">
          <input type="checkbox" class="agree-policy" />同意BOSS直聘
          <a href="" class="user-agreement">《用户协议》</a>
          <a href="" class="user-agreement">《隐私政策》</a>
        </div>

        <div class="publicity-info">
          <p>客服电话 400-065-5799 工作时间：9:30-18:30</p>
          <p class="prove-list">
            <a href="">人力资源服务许可证&nbsp;|</a>
            <a href="">营业执照&nbsp;|</a>
            <a href="">朝阳区人社局监督电话</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "SignSms",
  methods: {
    showSCanHandle() {
      this.$emit("showSms", true);
    },
  },
};
</script>
  
  <style lang="less" scoped>
.sign-content {
  width: 500px;
  height: 100%;
  float: right;
  border-radius: 0 10px 10px 0;

  .inner-box {
    position: relative;
    width: 324px;
    padding-top: 68px;
    margin: 0 auto;

    .sign-tab {
      height: 22px;
      margin-bottom: 36px;
      padding: 0 0 15px;
      line-height: 22px;
      border: none;
      text-align: center;

      p {
        width: 100%;
        height: 24px;
        font-size: 20px;
        font-weight: 500;
        color: rgba(65, 74, 96, 1);
        line-height: 24px;
      }
    }

    .sign-call {
      width: 324px;
      height: 42px;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      background: #fff;
      border: 1px solid #d1d4db;

      .el-icon-mobile-phone {
        color: #d1d4db;
        font-size: 20px;
      }

      p {
        color: #414a60;
        font-size: 14px;
        padding-left: 8px;
        line-height: 22px;
      }

      .el-icon-arrow-down {
        margin-left: 4px;
        color: #d1d4db;
        font-size: 16px;
        line-height: 22px;
      }

      .ipt {
        font-size: 14px;
        padding-left: 12px;
        width: 209px;
        border: none;
        outline: none;
      }
    }

    .form-row {
      width: 324px;
      height: 42px;
      line-height: 42px;
      box-sizing: border-box;
      background: #fff;
      border: 1px solid #d1d4db;
      margin-top: 25px;
      text-align: center;
      font-size: 14px;
    }

    .form-rows {
      width: 324px;
      height: 42px;
      line-height: 42px;
      box-sizing: border-box;
      background: #fff;
      border: 1px solid #d1d4db;
      margin-top: 25px;

      .el-icon-message {
        padding: 8px;
        color: #d1d4db;
        font-size: 20px;
      }

      input {
        font-size: 14px;
        padding-left: 12px;
        width: 150px;
        border: none;
        outline: none;
      }

      span {
        margin: 0 10px;
      }

      button {
        border: none;
        font-size: 14px;
        font-style: normal;
      }
    }

    .from-btn {
      width: 324px;
      height: 42px;
      line-height: 42px;
      margin-top: 25px;
      text-align: center;
      background-color: #5dd5c8;

      button {
        font-size: 16px;
        height: 42px;
        line-height: 42px;
        border: none;
        cursor: pointer;
        background-color: #5dd5c8;
        color: #fff;
      }
    }

    .text-tip {
      display: flex;
      justify-content: space-between;
      padding: 16px 0 0 0;
      color: #9fa3b0;
      text-align: center;
      overflow: hidden;
      font-size: 13px;
      font-weight: 500;
      width: 324px;
      height: 42px;
      margin: 0 auto;

      .icon-weixin {
        font-size: 18px;
      }

      a {
        text-decoration: none;
        display: block;
      }
    }

    .text-argeement {
      font-size: 13px;
      font-weight: 400;
      color: rgba(141, 146, 161, 1);
      line-height: 18px;
      text-align: center;

      a {
        text-decoration: none;
      }
    }

    .publicity-info {
      text-align: center;
      margin-top: 20px;

      p {
        color: #8d92a1;
        font-size: 12px;
        text-align: center;
        line-height: 20px;

        a {
          text-decoration: none;
          color: #8d92a1;
          padding: 0 4px;
          display: inline-block;
        }
      }
    }
  }
}
</style>